<template lang="html">
  <div class="j_content">
    <div class="top">
      <img src="../assets/images/top.png" alt="">
    </div>
    <div class="rule">
      <img v-on:click="showmodal=1" src="../assets/images/rule.png" alt="">
    </div>
    <div class="j_boxbg">
      <div class="j_box">
        <img class="j_bg" src="../assets/images/1.gif" />
        <div class="j_area" :style="'transform: rotate('+angle+'deg);transition: all '+interval+'s;'">
          <img src="../assets/images/2_1.png" alt="">
        </div>
        <div class="j_zhen">
          <img v-on:click="play" src="../assets/images/3.png" alt="">
        </div>
      </div>
    </div>
    <div class="myprize">
      <router-link to="myprize?id=123"><img src="../assets/images/myprize.png" alt=""></router-link>
    </div>
    <div class="bottom">
      <img src="../assets/images/bottom.png" alt="">
    </div>
    <!--分享-->
    <div v-if="showshare" v-on:click="showshare=false" class="share">
      <img src="../assets/images/share.png" alt="">
    </div>
    <!--其他蒙层-->
    <div v-if="showmodal!=0" class="modal">
      <!--规则蒙层-->
      <div v-if="showmodal==1" class="modal_item">
        <div class="close">
          <img v-on:click="showmodal=0" src="../assets/images/close.png" alt="">
        </div>
        <div class="rule_modal">
          <div class="title">
            活动规则
          </div>
          <div class="info">
            <p>1）狂欢礼券使用范围：除名表首饰、化妆品、食集、健身器材、文化/乐器、7F东方电器、团购中心、租赁商户、指定专柜及指定商品外全场通用，单笔限用一张；</p>
            <p>2）50元小家电券仅限7F东方电器小家电使用，100元大家电券仅限7F东方电器大家电使用，指定专柜及指定商品除外，单件商品限用一张；</p>
            <p>3）各券类不积分不返券，不找零不兑现，使用时间：2018.7.21-7.22，逾期作废；</p>
            <p>4）租赁券仅限指定租赁商户使用，单件商品限用一张，使用细则详见券面；</p>
            <p>5）百货狂欢礼券领取后将自动存放至个人微信“我”-“卡包”-“大东方百货会员卡”-“优惠券”中，7.21-7.22到店至收银台即可使用；</p>
            <p>6）东电通用券及租赁商户券领取后将自动存放至个人微信“我”-“卡包”-“我的票券”中，7.21-7.22到店至A座1F102收银台旁进行兑换方可使用</p>
          </div>
        </div>
      </div>
      <!--未中奖蒙层-->
      <div v-if="showmodal==2" class="modal_item">
        <div class="close">
          <img v-on:click="showmodal=0" src="../assets/images/close.png" alt="">
        </div>
        <div class="no_modal">
          <div class="title">
            很遗憾，没有抽中奖品，换个手试试手气吧 !
          </div>
          <div class="btns">
            <div class="btn">
              <img v-on:click="doagain" src="../assets/images/btn_again.png" alt="">
            </div>
            <div class="btn">
              <img v-on:click="showshare=true" src="../assets/images/btn_share.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <!--中奖蒙层-->
      <div v-if="showmodal==3" class="modal_item">
        <div class="close">
          <img v-on:click="giveup" src="../assets/images/close.png" alt="">
        </div>
        <div class="prize_modal">
          <div class="title">
            <p class="p1">恭喜你，获得</p>
            <p class="p2">{{prize.prizeName}}</p>
          </div>
          <div class="btns">
            <div class="btn float">
              <img v-on:click="receive" src="../assets/images/btn_receive.png" alt="">
              <img v-on:click="giveup" src="../assets/images/btn_giveup.png" alt="">
            </div>
            <div class="btn">
              <img v-on:click="showshare=true" src="../assets/images/btn_share.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div v-if="showmodal==4" class="modal_item">
        <div class="close">
          <img v-on:click="showmodal=0" src="../assets/images/close.png" alt="">
        </div>
        <div class="no_modal">
          <div class="title">
            卷已放到 "我的中奖" 中，请尽快领取哦~
            <router-link to="myprize" class="gomyprize">去看看</router-link>
          </div>
          <div class="btns">
            <div class="btn">
              <img v-on:click="doagain" src="../assets/images/btn_again.png" alt="">
            </div>
            <div class="btn">
              <img v-on:click="showshare=true" src="../assets/images/btn_share.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div v-show="showmodal==5" class="modal_item">
              <img class="guanggao" src="../assets/images/guanggao.jpg" alt="">
            </div>
    </div>
  </div>
</template>

<script>
import utils from './../js/utils';
import wxconfig from './../assets/js/wxconfig.js'
export default {
    data(){
      return {
        data:[
          {index:1, id:1,name:"最新iPhone",faceImg:""},
          {index:2, id:24921,name:"100元狂欢卷",faceImg:""},
          {index:3, id:24925,name:"50元小家电卷",faceImg:""},
          {index:4, id:22163,name:"200元狂欢卷",faceImg:""},
          {index:5, id:24901,name:"谢谢参与",faceImg:""},
          {index:6, id:24922,name:"50元狂欢卷",faceImg:""},
          {index:7, id:3,name:"店铺好礼",faceImg:""},
          {index:8, id:24923,name:"20元狂欢卷",faceImg:""},
          {index:9, id:24924,name:"100元大家电卷",faceImg:""}
        ],//奖品
        isture:false,//是否正在抽奖
        interval:4,//转盘转动时长
        angle:0,//转盘转动角度
        showmodal:0,//显示蒙层:0.不显示、1.规则 2.未抽中 3.抽中 4.已领
        showshare:false,//显示分享
        prize:{id:0,prizeId:0,prizeName:""},
        userInfo:{openId:"",vipid:""},
        guanggaoImg:'../assets/images/guanggao.png'
      }
    },
    methods:{
      //玩游戏
      play:function(){
        var that=this;
        if(that.isture) return; // 如果在执行就退出
        that.isture = true;
        that.clickfunc();
      },
      //获取抽奖
      clickfunc:function(){
        var that=this;
        /*请求后台抽奖*/
        utils.ajax(utils.AJAX_SRC +'ddfwap/getResult' , {hdid:3,openid:that.userInfo.openId}).
          then(result=>{
          console.log(result)
              if(result.code === -1) {
                  alert(result.msg);
              }
              if(result.code === 1) {
                that.prize={id:result.data.cjjlid,prizeId:result.data.prize,prizeName:result.data.mc};
                var thisobj=that.data.find(function(value, index, arr) {  return value.id == that.prize.prizeId;});
                that.rotateFunc(thisobj.index, result.data.mc,function(){
                 //转盘结束后执行函数
                 if(thisobj.index==5){
                   that.showmodal=2;
                 }else{
                   that.showmodal=3;
                 }
               });
              }
         });
        /*var data={id:0,prizeId:that.data.length-Math.floor(Math.random() * that.data.length)};
        var thisobj=that.data.find(function(value, index, arr) {  return value.id == data.prizeId;});
        that.prize=data;
        that.prize.prizeName=thisobj.name;*/
        /**/

      },
      //领取奖品操作
      receive:function(){
        var that=this;
        //TODO发起领奖请求([中奖id,微信openid])
         console.log(that.userInfo.openId);
         console.log(that.prize.id);
        utils.ajax(utils.AJAX_SRC +'ddfwap/getJiang' , {cjjlid: that.prize.id,openid:that.userInfo.openId,type:1}).
            then(result=>{
                if(result.code === -1) {
                    alert(result.msg);
                };
                if(result.code ===0 ) {
                  /*未注册(提供注册地址并注册完成后返回指定地址)*/
                     var backurl=location.host+"#/?id="+that.prize.id+"&openid="+that.userInfo.openId;
                     location.href=result.rurl +"?backurl="+that.EncodeUtf8(backurl);
                   };
                if(result.code === 1) {
                 /*领取成功*/
                  that.showmodal=4;
                };
                if(result.code === 2) {
                     /*领取成功*/
                     console.log(result.rurl);
                      location.href=result.rurl;
                    };
           });


        /*未注册(提供注册地址并注册完成后返回指定地址)*/
        //var backurl=location.href+"?id="+prize.id+"&openid="+that.userInfo.openId;
        //location.href="注册地址?backurl="+backurl;
        /*其他情况输出错误提示(返回错误信息)*/
      },
      //放弃领取奖品操作
      giveup:function(){
        var that=this;
        utils.ajax(utils.AJAX_SRC +'ddfwap/getJiang' , {cjjlid: that.prize.id,openid:that.userInfo.openId,type:-1}).
            then(result=>{
                if(result.code === -1) {
                    alert(result.msg);
                };
                if(result.code ===0 ) {
                  /*未注册(提供注册地址并注册完成后返回指定地址)*/
                     var backurl=location.host+"#/?id="+that.prize.id+"&openid="+that.userInfo.openId;
                     location.href=result.rurl +"?backurl="+that.EncodeUtf8(backurl);
                   };
                if(result.code === 1) {
                  that.showmodal=0;
                };
           });


        /*未注册(提供注册地址并注册完成后返回指定地址)*/
        //var backurl=location.href+"?id="+prize.id+"&openid="+that.userInfo.openId;
        //location.href="注册地址?backurl="+backurl;
        /*其他情况输出错误提示(返回错误信息)*/
      },
      //展示抽奖过程
      rotateFunc:function(index,text,successFun){
        var that=this;
        that.isture = true;
        that.interval=4;
        that.angle=parseInt(that.angle/360)*360+(1440-(index-1)*40);
        setTimeout(function () {
          that.isture = false; // 标志为 执行完毕
          typeof successFun == "function" && successFun();
        }, 4000);
      },
      EncodeUtf8(s1)
      {
            var s = escape(s1);
            var sa = s.split("%");
            var retV ="";
            if(sa[0] != "")
            {
               retV = sa[0];
            }
            for(var i = 1; i < sa.length; i ++)
            {
                 if(sa[i].substring(0,1) == "u")
                 {
                     retV += Hex2Utf8(Str2Hex(sa[i].substring(1,5)));
                 }
                 else retV += "%" + sa[i];
            }

            return retV;
      },
      doagain:function functionName() {
                  var that=this;
                  that.showmodal=5;
                  setTimeout(function () {
                    that.showmodal = 0;
                  }, 2000);
                },
    },
    mounted(){
      var that=this;
      if(!that.$route.query.openid&&!localStorage.getItem("openid")){
        //TODO获取授权地址授权成功后回调并带回openid
        location.href=utils.AJAX_SRC +'ddfwap/Index?backurl='+that.EncodeUtf8(location.href);
      }else{
        that.userInfo.openId=!that.$route.query.openid?localStorage.getItem("openid"):that.$route.query.openid ;
        localStorage.setItem('openid',that.userInfo.openId);
        utils.ajax(utils.AJAX_SRC +'ddfwap/GetUserInfo' , {hdid:3,openid:that.userInfo.openId}).
            then(result=>{
                if(result.code === -1) {
                    location.href=result.val;
                };
                if(result.code === 1) {
                    that.userInfo.vipid = result.data.vipid;
                    console.log(that.userInfo.vipid);
                    console.log(result.data.prize)
                    if(result.data.count > 0)
                    {
                      that.prize=result.data.prize;
                      that.showmodal=3;
                      //TODO根据id获取该id抽奖信息,如果状态是未领取则展示领取////////
                    }
                }
           });
        };
        wx.ready(function(){
          wx.onMenuShareTimeline({
              title: "大东方年中大狂欢，等你来转最新款iPhone ！",
              link: "我在大东方年中庆领到一张xx券，你也快点来吧！",
              imgUrl: "http://ddfwechat.eastall.com/Content/ddf/images/shake/top.png",
              success: function () {
                utils.ajax(utils.AJAX_SRC +'ddfwap/menuShare' , {hdid:3,openid:that.userInfo.openid, type: "2" }).
                  then(result=>{
                 });
              }, cancel: function () {
              }
          })
          wx.onMenuShareAppMessage({
              title: "大东方年中大狂欢，等你来转最新款iPhone ！",
              desc: "我在大东方年中庆领到一张xx券，你也快点来吧！",
              imgUrl: "http://ddfwechat.eastall.com/Content/ddf/images/shake/top.png",
              type: 'link',
              dataUrl: '',
              success: function () {
                  utils.ajax(utils.AJAX_SRC +'ddfwap/menuShare' , {hdid:3,openid:that.userInfo.openid, type: "1" }).
                    then(result=>{
                   });
              },
              cancel: function () {
              }
          });
        });
    },

}
</script>

<style scoped>
.top{
  width: 100%;
  height: auto;
  margin: 0 auto;
  margin-bottom: -3.8rem;
}
.top img{
  width:100%;
}
.rule{
  text-align: center;
  width: 100%;
  text-align:right;
  position:absolute;
  z-index: 5;
}
.rule img{
  height: 0.8rem;
  padding-right: 1rem;
}
.myprize{
  text-align: center;
  width: 100%;
  text-align: center;
  padding-top: 0.5rem;
  position:absolute;
  z-index: 5;
}
.myprize img{
  height: 1.2rem;
}
.bottom{
  width: 100%;
  height: auto;
  margin: 0 auto;
  bottom: -0.3rem;
  position: fixed;
}
.bottom img{
  width:100%;
}
.j_content{
  height: auto;
  font-family: "微软雅黑", "microsoft yahei";
  overflow: hidden;
}
.j_boxbg{
  background-image:url("../assets/images/panbg.png");
  background-size:100% 100%;
}
.j_box{
  width: 72%;
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  justify-content: center;;
  align-items: center;
  position:relative;
}
.j_box .j_bg{
  vertical-align: top;
  width: 100%;
}
.j_area{
  display: flex;
  position:absolute;
  z-index: 2;
  width: 80%;
  height: 80%;
}
.j_area img{
  width: 100%;
}
.j_zhen{
  display: flex;
  position:absolute;
  z-index: 3;
  width: 40%;
  height: 40%;
}
.j_zhen img{
  width: 100%;
}
.share{
  width: 100%;
  height: 100%;
  position:absolute;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
  text-align: center;
  padding-top: 2rem;
  overflow: hidden;
}
.share img{
  width: 70%;
}
.modal{
  width: 100%;
  height: 100%;
  position:absolute;
  z-index: 9;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
  text-align: center;
  overflow: hidden;
  display: flex;
  display: -webkit-flex;
  justify-content: center;;
  align-items: center;
}
.modal_item{
  width: 80%;
  height: auto;
  min-height: 10rem;
  margin: 10%;
  background-color: #ffffff;
  border-radius: 5px;
}
.modal_item .close{
  height: 1rem;
  text-align: right;
  padding: .6rem 0.6rem 0 0;
}
.modal_item .close img{
  height: 1rem;
}
.modal_item .rule_modal .title{
  font-size: 1rem;
}
.modal_item .rule_modal .info{
  font-size: .7rem;
  text-align:left;
  padding:.5rem 1rem;
  color: #8A8A8A;
  padding-bottom: 1.5rem;
}
.modal_item .no_modal{
  padding:0 2rem;
}
.modal_item .no_modal .title{
  font-size: .7rem;
  text-align: left;
  color: #280809;
}
.btns{
  padding:.5rem;
}
.btns .btn{
  padding:.3rem;
}
.btns .btn img{
  width: 100%;
}
.modal_item .prize_modal{
  padding:0 2rem;
}
.btns .float{
  display: -webkit-flex;
  display: flex;
  flex-wrap:nowrap;
  justify-content:space-between;
}
.btns .float img{
  width: 46%;
  height: 1.8rem;
}
.modal_item .prize_modal .title{
  font-size: .9rem;
  text-align: center;
}
.modal_item .prize_modal .title .p1{
  font-size: .8rem;
  color: #280809;
}
.modal_item .prize_modal .title .p2{
  font-size: 1rem;
  color: #C1061C;
}
.gomyprize{
  color:#C1061C;
}
.guanggao{
  width: 100%;
  height: auto;
}
</style>
